<template>
    <a-button v-bind="custProps" :style="btnStyle">
        <slot></slot>
    </a-button>
</template>

<script lang="jsx" setup>
import { ref, onMounted, onActivated, useAttrs, computed } from 'vue'

defineOptions({
    inheritAttrs: false
})
const props = defineProps({
    color: {
        type: String,
        default: 'gray'
    }
})

const attrs = useAttrs()
const custProps = computed(() => {
    return attrs
})

const btnStyle = computed(() => {
    if(attrs.disabled) {
        return {}
    }
    let colorList = {
        gray: '#aaa',
        primary: '#1677ff',
        warning: '#ff9900',
        success: '#19be6b',
        danger: '#ff4d4f',
    }
    if(custProps.value.type == 'primary') {
        return {
            background: colorList[props.color],
            color: '#fff'
        }
    } else if(custProps.value.type == 'dashed') {
        return {
            borderColor: colorList[props.color],
            color: colorList[props.color]
        }
    } else if(custProps.value.type == 'text') {
        return {
            color: colorList[props.color]
        }
    } else if(custProps.value.type == 'link') {
        return {
            color: colorList[props.color]
        }
    } else {
        return {
            borderColor: colorList[props.color],
            color: colorList[props.color] || '#333'
        }
    }
})



</script>

<style>

</style>
